<template>
  <div class="doubleLine" id="ID_EveryMonthOutput"></div>
</template>

<script setup>
import { watch, shallowRef, onMounted, reactive,defineExpose } from 'vue'
import * as echarts from 'echarts';
import { useVisualizingCustomerStore } from '/@/stores/visualizingCustomer'
import { storeToRefs } from 'pinia';
import { getEquipOutputMonthData } from '/@/api/visualizing/slave'
import lodash from 'lodash'
const myChart = shallowRef(null)
const store = useVisualizingCustomerStore()
const {customer_id,current_equip_num} = storeToRefs(store)
const setChart = (productionDate,totalCount,qualifiedCount,qualifiedRates) => {
  const option = {
    tooltip: {
      trigger: 'axis'
    },
    legend:{
        top: '8%',
        left: '30%',
        itemWidth: 12,
        textStyle: {
          color: '#5CB1C1',
        },
    },
    grid: {
      top: '12%',
      left: '10%',
      right: '10%',
      bottom: '10%',
      containLabel: false
    },
    xAxis: {
      type: 'category',
      axisLine: {
        symbol: ['none', 'arrow'],
        symbolSize: [6, 6],
        symbolOffset: [0, 10],
        lineStyle: {
          color: '#122C49'
        }
      },
      axisTick: { show: false },
      axisLabel: {
        color: '#61B9C8',
        fontSize: 9
      },
      data: productionDate
    },
    yAxis: [
      {
        type: 'value',
        axisLabel: {
          color: '#61B9C8',
          showMaxLabel: false,
          fontSize: 9
        },
        name: '(饼)',
        
        axisLine: {
          show: true,
          symbol: ['none', 'arrow'],
          symbolSize: [6, 6],
          lineStyle: {
            color: '#122C49'
          }
        },
        nameTextStyle: {
          color: '#61B9C8',
          fontSize: 9,
          align: 'right',
          padding: [0, 6, 0, 0]
        },
        splitLine: {
          show: false,
        },
      },
      {
        type: 'value',
        name: '合格率',
        scale: true,
        max:100,
        axisLabel: {
          formatter: '{value}%'
        },
        axisLine: {
          show: true,
          symbol: ['none', 'arrow'],
          symbolSize: [6, 6],
        },
        splitLine: {
          show: false,
        }
      }
    ],
    series: [
      {
        type: 'bar',
        barWidth: 12,
        name: '总产量',
        barGap: '40%',
        lineStyle: {
          color: '#6e5eff',
        },
        itemStyle: {
          color: '#6e5eff'
        },
        data: totalCount,
      },
      {
        type: 'bar',
        barWidth: 12,
        barGap: '40%',
        name: '合格产量',
        lineStyle: {
          color: 'rgba(15,94,110,1)',
        },
        itemStyle: {
          color: 'rgba(15,94,110,1)'
        },
        data: qualifiedCount,
      },
      {
        type: 'line',
        yAxisIndex: 1,
        name: '合格率',
        tooltip: {
          formatter: '{b} : {c}%'
        },
        data: qualifiedRates
      }
      
    ]
  };
  if (!myChart.value) myChart.value = echarts.init(document.getElementById('ID_EveryMonthOutput'));
  myChart.value.clear();
  myChart.value.setOption(option);
}

const getEquipOutputMonthDataRequest = async () => {
  const res = await getEquipOutputMonthData(customer_id.value, current_equip_num.value.equipNum)
  const dataList = lodash.get(res, 'data.list', [])
  const productionDate = [],totalCount=[],qualifiedCount=[],qualifiedRates=[]
  dataList.map(item=>{
    productionDate.push(`${item.productionYear}年${item.productionMonth}月`)
    totalCount.push(item.qualifiedCount+item.unqualifiedCount)
    qualifiedCount.push(item.qualifiedCount)
    qualifiedRates.push(item.qualifiedRatio)
  }),
  setChart(productionDate,totalCount,qualifiedCount,qualifiedRates)
  setTimeout(() => {
    getEquipOutputMonthDataRequest()
  }, 1000*3);
 
}
watch(()=>current_equip_num.value.id, (newVal, oldVal) => {
  getEquipOutputMonthDataRequest();
},{deep: true})

const resize = () => {
  myChart.value && myChart.value.resize()
}
defineExpose({
  resize
})


</script>

<style lang="less" scoped>
.doubleLine {
  height: 100%;
  width: 100%;
}
</style>
